import React from "react";
import { Todo } from "../types/todo";
import Item from "./Item";

interface ItemListProps {
  todos: Array<Todo>;
  children?: React.ReactNode;
  onDel: (id: number) => void;
  onToggle: (id: number) => void;
}

const ItemList = ({ todos, children, onDel, onToggle }: ItemListProps) => {
  return (
    <>
      {children}
      
      <ul>
        {todos.map((todo) => (
          <Item
            key={todo.id}
            todo={todo}
            style={{ textDecoration: todo.done ? "line-through" : "none" }}
          >
            <button onClick={() => onToggle(todo.id)}>
              {todo.done ? "已完成" : "未完成"}
            </button>
            <button onClick={() => onDel(todo.id)}>删除</button>
          </Item>
        ))}
      </ul>
    </>
  );
};

export default ItemList;
